<template>
  <div class="particle-background">
    <div
      v-for="particle in particles"
      :key="particle.id"
      class="particle"
      :style="{
        left: particle.x + '%',
        top: particle.y + '%',
        animationDelay: particle.delay + 's',
        animationDuration: particle.duration + 's'
      }"
    ></div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

interface Particle {
  id: number
  x: number
  y: number
  delay: number
  duration: number
}

const particles = ref<Particle[]>([])

const createParticles = () => {
  const particleCount = 50
  const newParticles: Particle[] = []
  
  for (let i = 0; i < particleCount; i++) {
    newParticles.push({
      id: i,
      x: Math.random() * 100,
      y: Math.random() * 100,
      delay: Math.random() * 10,
      duration: 10 + Math.random() * 20
    })
  }
  
  particles.value = newParticles
}

onMounted(() => {
  createParticles()
})
</script>

<style scoped>
.particle-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float-particle linear infinite;
}

.particle:nth-child(odd) {
  background: rgba(99, 102, 241, 0.1);
  width: 6px;
  height: 6px;
}

.particle:nth-child(3n) {
  background: rgba(139, 92, 246, 0.1);
  width: 3px;
  height: 3px;
}

.particle:nth-child(5n) {
  background: rgba(236, 72, 153, 0.1);
  width: 5px;
  height: 5px;
}

@keyframes float-particle {
  0% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(360deg);
    opacity: 0;
  }
}
</style>

